

<template>
<div class="cardReceipt">
  <navBar :title='title' :titleColor='titleColor' :backVisible='backVisible' :homePath='homePath' :visibleLeft='visibleLeft'></navBar>
  <div class="cardReceiptBox">
    <div class="cardReceiptBoxCenter">
      <p class="cardReceiptBoxTit">贵宾预约优惠券</p>
      <p class="cardReceiptBoxsubtitle">胡明晓送你一张贵宾预约优惠券</p>
      <div class="cardReceiptBoxNr">
          <p class="cardReceiptBoxNrMoney">￥<span>100</span></p>
          <p class="cardReceiptBoxNrMoneyMin">满1000元可用</p>
          <p class="cardReceiptBoxNrMoneyTime"><span class="fl"></span>有效期至：2020-05-22 <span  class="fr"></span></p>
      </div>
       <div class="cardPackageCentenListBottom"><span class="gardenLeft"></span><span class="gardenRight"></span>满50人可用。限商品现价使用，限非企业用</div>
    </div>
     
    <button class="getItrightNow">立即领取</button>
    
    
  </div>
</div>
</template>

<script>
import navBar from "@/components/navBar/index"
export default {    
  components:{
    navBar
  },   
  data(){
    return{
      title:'卡券领取',
      // 标题颜色
      titleColor: {
        default: "#FFFFFF"
      },
      backVisible:true,
      homePath:true,
      visibleLeft:true,
    }
  },

  methods: {

  },

}
</script>

<style scoped>
.cardReceipt{
  width: 100%;
  min-height:100vh;
  background: #fff;
}
.cardReceiptBox{
  width: 100%;
  padding:15px;
  box-sizing: border-box;
}
.cardReceiptBoxCenter{
  width: 100%;
  padding-top: 30px;
}

.cardReceiptBoxTit{
  font-size:22px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
line-height:30px;
text-align: center
}
.cardReceiptBoxsubtitle{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
line-height:17px;
text-align: center
}
.cardReceiptBoxNr{
  width: 94%;
  margin: 24px auto 0;
  background:rgba(255,255,255,1);
box-shadow:0px 1px 8px 0px rgba(33,32,30,0.1);
padding: 30px 10px;
box-sizing: border-box
}
.cardReceiptBoxNrMoney{
  font-size:20px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:28px;
text-shadow:0px 1px 8px rgba(33,32,30,0.1);
text-align: center
}
.cardReceiptBoxNrMoney span{
  font-size:45px;
font-family:DINPro-Medium,DINPro;
font-weight:500;
color:rgba(51,51,51,1);
line-height:58px;
text-shadow:0px 1px 8px rgba(33,32,30,0.1);
}
.cardReceiptBoxNrMoneyMin{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:14px;
text-shadow:0px 1px 8px rgba(33,32,30,0.1);
margin-top: 5px;
text-align: center
}
.cardReceiptBoxNrMoneyTime{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:20px;
text-shadow:0px 1px 8px rgba(33,32,30,0.1);
text-align: center;
width: 250px;
margin: 24px auto 0;
}
.cardReceiptBoxNrMoneyTime span{
  margin: 0 10px;
  border: 1px dashed #21201E;
  display: inline-block;
  width: 40px;
  margin-top:10px;
}
.cardPackageCentenListBottom{
 width: 94%;
  margin: 0px auto 0;
position: relative;
padding: 12px 15px;
box-sizing: border-box;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
border-radius: 5px;
background:rgba(252,252,252,1);
box-shadow:0px 1px 8px 0px rgba(33,32,30,0.1);
}
.cardPackageCentenListBottom span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
background:rgba(247,247,247,1);
position: absolute ;
}

.gardenLeft{
  top: -5px;
  left: -5px;
  box-shadow:3px 0px 5px 0px rgba(0,0,0,0.08);
}
.gardenRight{
  top: -5px;
  right: -5px;
  box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.08);
}
.getItrightNow{
 width: 94%;
  margin: 36px auto 0;
height:45px;
background:rgba(204,170,126,1);
border-radius:3px;
line-height: 45px;
font-size:16px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1)
}
</style>
